<template>
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse-transition="false"
  >
    <!-- 是否水平折叠收起菜单collapse -->
    <div class="headMenu" v-show="!isCollapse">
      <div class="headTitle">
      <div> <img style="margin-top:18px" src="../assets/images/物联网平台.png"/></div>
      <div>物联信息管理</div>
      </div>
    </div>
    <div class="headMenu" v-show="isCollapse">
       <div> <img style="margin-top:18px" src="../assets/images/物联网平台.png"/></div>
    </div>
    <!-- 对于不含二级菜单的菜单，直接el-menu-item 遍历就行了 对于可以跳转的选择绑定点击事件clickMenu(item)-->
    <el-menu-item
      :index="item.path"
      v-for="item in noChildren"
      :key="item.path"
      @click="clickMenu(item)"
      class="father"
    >
     <el-icon :size="20">
	            <component :is="item.icon" />
	        </el-icon>
      <span >{{ item.label }}</span>
    </el-menu-item>
    <!-- 专门应用于含有子菜单的标签，默认点击时展开子菜单 -->
    <el-sub-menu
      :index="item.label"
      v-for="item in hasChildren"
      :key="item.path"
      class="father"
    >
      <template #title>
               <el-icon :size="20">
	            <component :is="item.icon" />
	        </el-icon>
        <span >{{ item.label }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          :index="subItem.path"
          v-for="(subItem, subIndex) in item.children"
          :key="subIndex"
          @click="clickMenu(subItem)"
          class="child"
        >
         <el-icon :size="20">
	            <component :is="subItem.icon" />
	        </el-icon>
          <span>{{ subItem.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          path: "/home",
          name: "home",
          label: "首页",
          icon: "House",
          url: "",
        },
        {
          label: "系统管理",
          icon: "setting",
          children: [
            {
              path: "/admin/userManage",
              name: "userManage",
              label: "用户管理",
              icon: "user",
              url: "",
            },
            // {
            //   path: "",
            //   name: "Auto",
            //   label: "角色管理",
            //   icon: "Operation",
            //   url: "",
            // },
            // {
            //   path: "",
            //   name: "source",
            //   label: "资源管理",
            //   icon: "Open",
            //   url: "",
            // },
          ],
        },
        // {
        //   label: "课程管理",
        //   icon: "setting",
        //   children: [
        //     {
        //       path: "",
        //       name: "course",
        //       label: "课程管理",
        //       icon: "Edit",
        //       url: "",
        //     },
        //   ],
        // },
        // {
        //   label: "学校管理",
        //   icon: "setting",
        //   children: [
        //     {
        //       path: "",
        //       name: "shcool",
        //       label: "学校信息",
        //       icon: "Eleme",
        //       url: "",
        //     },
        //   ],
        // },
      ],
    };
  },
  methods: {
    clickMenu(item) {
      if (window.location.pathname != item.path) {
        this.$router.push(item.path).catch((err) => {});
        this.$store.commit("selectMenu", item);
      } else {
        return;
      }
    },
  },
  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
    //跨组件使用方法，将变量（全局）放在store中，并加以调用,需要注意的是调用方法格式
    isCollapse() {
      return this.$store.state.menu.isCollapse;
    },
  },
};
</script>
<style  scoped>
.el-menu {
  height: 100%;
  border: none;
  transition: all 0.5s;
}
.headMenu{
  color: #ffffff;
  text-align: center;
  line-height: 48px;
}
.headTitle{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.child{
  font-size: 14px;
  padding:0px 15px 0px  ;
  height: 45px;
  line-height: 45px;
}
</style>